<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>用户验证</title>
  <style>
    body {
      font-family: 'Microsoft YaHei', '微软雅黑', Arial;
      padding: 20px;
    }
    .form-group {
      margin-bottom: 15px;
    }
    label {
      display: block;
      margin-bottom: 5px;
    }
    input {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }
    button {
      padding: 10px 20px;
      background-color: #409eff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-left: 15px;
    }
    button:hover {
      background-color: #0069d9;
    }
    .btn-cancel {
      background-color: #6c757d;
    }
    .btn-cancel:hover {
      background-color: #5a6268;
    }
    .form-actions {
      display: flex;
      justify-content: flex-end;
    }
  </style>
</head>
<body>
  <form id="infoForm">
    <div class="form-group">
      <label for="number">用户名:</label>
      <input type="text" id="number" placeholder="请输入用户名" required>
    </div>
    <div class="form-group">
      <label for="password">密码:</label>
      <input type="password" id="password" placeholder="请输入密码" required>
    </div>
    <div class="form-actions">
      <button type="button" class="btn-cancel" id="closeBtn">取消</button>
      <button type="submit">确定</button>
    </div>
  </form>

  <script>
    // 渲染进程代码
    const { ipcRenderer } = require('electron')
    const form = document.getElementById('infoForm')
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      
      const number = document.getElementById('number').value;
      const password = document.getElementById('password').value;
      
      ipcRenderer.send('form-submitted', { number, password });
    })
    
    document.getElementById('closeBtn').addEventListener('click', () => {
      ipcRenderer.send('close-dialog');
    });
  </script>
</body>
</html>